<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/calendarUnlimited.css"/>
    <style>
        .swipe {
            overflow: hidden;
            visibility: hidden;
            position: relative;
        }
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap > div {
            float:left;
            width:100%;
            position: relative;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: white;
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
    <div class="flex" style="width: 100%; height: 0.62rem; justify-content: center; align-items: center;">
        <p id="calendar-title" style="font-size: 0.16rem; line-height: 0.22rem; color: #A0522C;"></p>
    </div>
    <div class="flex" style="width: 100%; height: auto; justify-content: center;">
        <div style="width: 93%;">
            <div class="flex" style="width: 100%; height: 0.30rem; justify-content: space-around; border-style:solid; border-width:0 0 0.01rem 0; border-color: #DFDFE4">
                <div class="week-text">日</div>
                <div class="week-text">一</div>
                <div class="week-text">二</div>
                <div class="week-text">三</div>
                <div class="week-text">四</div>
                <div class="week-text">五</div>
                <div class="week-text">六</div>
            </div>
            <div id='calendarUnlimited' class='swipe' style='width: 100%; height: auto;'>
                <div class='swipe-wrap' style="width: 100%;">
                    <div id="calendar-0" class="calendar" style="width: 100%;"></div>
                    <div id="calendar-1" class="calendar" style="width: 100%;"></div>
                    <div id="calendar-2" class="calendar" style="width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript" src="../../script/common/swiper/swipe.js"></script>
<script type="text/javascript" src="../../script/common/calendarUnlimited.js"></script>
<script type="text/javascript">
    var clickLock;
    var bookingTime = [], bookingTimeData = [];
    apiready = function () {
        var todate = new Date();

        initCalendar (todate.getFullYear(), todate.getMonth());

        getBookingTime();
    }

    function getBookingTime() {
        api.ajax({
            url: apiUrl + '/inquiry/booking-time',
            tag: '/inquiry/booking-time',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    master_id: api.pageParam.master_id,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    bookingTime = ret.data.TimeList;
                    for (var a=0,lena=bookingTime.length; a<lena; a++) {
                        bookingTimeData[bookingTime[a]["date"]] = bookingTime[a]["duration"];
                    }
                    haveCalendarTag(bookingTime)
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function selectCalendarDate(el) {
        var id = $api.attr(el,'id');
        var date = id.substring(2);
        if (bookingTimeData[date] != undefined) {
            api.openFrame({
                name: 'backGround',
                url: './backGround.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight,
                },
                bounces: false,
                bgColor: "rgba(0,0,0,0.5)",
                animation: {
                    type:"fade",
                    // subType:"from_right",
                    duration:300
                }
            });

            api.openFrame({
                name: 'masterBookingChangeTime',
                url: './masterBookingChangeTime.html',
                pageParam: {
                    master_id: api.pageParam.master_id,
                    name: api.pageParam.name,
                    date: date,
                    duration: bookingTimeData[date],
                },
                rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight,
                },
                bounces: false,
                bgColor: "rgba(0,0,0,0)",
                animation: {
                    type:"movein",
                    subType:"from_bottom",
                    duration:300
                }
            });
        } else {
            return
        }
    }
</script>
